<template>

  <el-descriptions class="margin-top" title="个人信息" :column="2" :size="size" border>
    <template slot="extra">
      <el-button
        type="primary"
        size="small"
        @click="updateDetail"
      >
        修改信息</el-button>
      <el-button
        type="success"
        size="small"
        @click="returnList"
      >
        返回列表</el-button>
    </template>

    <template slot="">

    </template>
    <el-descriptions-item>
      <table class="table" border = "1" width="90%">
        <tr>
          <td align="center" width="15%" class="item">用户名</td>
          <td width="50%">
           {{user.username}}
          </td>
          <td rowspan="2" align="center" width="15%">
            头像
          </td>
          <td rowspan="2" align="center">
            <img :src="user.img" width="50" height="70" alt="" />
          </td>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
      </table>
    </el-descriptions-item>

  </el-descriptions>

</template>

<script>
// eslint-disable-next-line no-unused-vars
import { formatDate } from '@/utils/data'
export default {
  name: 'UserDetail',
  data() {
    return {
      user: {},
      size: '1',
      fileList: [],
      dialogVisible: false,
      ruleForm: {
        dialogImageUrl: '1' // 专区logo 上传到后台之后，后台会返回一个id,只需要给后台传id,但是点击编辑的时候后台返回的是http地址
      },
      imgUrl: ''
    }
  },
  mounted() {
    this.getUser()
  },
  methods: {
    getUser: function() {
      this.user = JSON.parse(this.$route.query.user)
      this.imgUrl = this.user.img
    },
    updateDetail() {
      this.$router.push({
        path: '/updateUser',
        query: { user: JSON.stringify(this.user) }
      })
    },
    returnList() {
      this.$router.push({
        path: '/userList'
      })
    }
  }
}
</script>

<style scoped>
.table{
  border: 1px solid #EBEEF5;
}
.item{
  background-color: #fafafa;
}
</style>
